<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单</title>
<script type="text/javascript">
/*Form对象：
 * 1、访问form对象方法：
 *      document.forms[i]; //返回当前页面所有form表单的集合
 *      document.formName; //返回指定名称的form表单
 * 
 * 2、获取表单中控件的值：
 *      form.inputName.value;
 * 
 * 3、设置表单中控件的值：
 *      form.inputName.value = "控件value值";
 * 
 * 4、获取表单中所有的控件 elements属性：
 *      form.elements; //所有form表单下所有控件的集合(不包含其他HTML标签)
 * */
window.onload = function(){
    var f1 = document.f1;       //0级DOM提供的访问Form对象的方法(非标准,但支持性好,可用)
    var f2 = document.forms[0]; //Form集合
    var f3 = document.getElementById("f1id");
    var f4 = document.getElementsByTagName("form")[0];
    
    var Value1 = f1.text1.value; //获取表单控件的值
    var Value2 = f1.text1.value = "文本框"; //设置表单控件的值
    
    var eles = f1.elements; //获得form表单下所有控件(不包含label,em等其他标签)
} 
/*From对象相关事件及方法:
 * 提交表单时进行事件监听：检测表单值是否为空
 * */
window.onload = function(){
    var f1 = document.f1;
    f1.onsubmit = function(){
        for(var i=0; i<this.elements.length; i++){
            if(!this.elements[i].value){
                alert("请填写值!");
                return false;
            }
        }
    }
}

/*表单元素及属性：
 * 
 * 单选按钮+复选框：
 *    checked ：检测该按钮是否被选中
 *    defaultChecked ：在HTML中默认选中
 * 
 * 单行文本框+多行文本框：
 *    defaultValue ：文本框中的默认文本
 *    select 方法 ： 是文本框中的文本处于选中状态 
 * 
 * Select对象(复合对象)：
 *    selectIndex ：选中项索引(从0开始)
 *    options ：伪数组类型属性,包括select所有option选项,下标访问
 *    text ：option包含的文本
 *    
 * */
    
    
    
    
    
</script>
</head>

<body>
<form name="f1" id="f1id">
  <p>单行文本框：
    <input type="text" name="text1" value="文本框" />  
  </p>
  <p>密码框：
    <input type="password" />
  </p>  
  <p>单选按钮：
    <input type="radio" name="r" value="单选按钮1"/>
    <input type="radio" name="r" value="单按钮2" />
  </p>
  <p>复选框：
    <input type="checkbox" name="c1" value="复选框1" />  
    <input type="checkbox" name="c2" value="复选框2" /> 
  </p>
  <p>下拉列表框：
      <select name="s1">
          <option value="0">--请选择我--</option>
          <option value="1">--选项1--</option>
          <option value="2">--选项2--</option>
      </select>
  </p>
  <p>多行文本框：
      <textarea>我是多行文本框！</textarea>
  </p>
  <p>提交按钮：
      <input type="submit" value="提交" />
  </p>
  <p>确认按钮：
      <input type="button" value="确定" />
  </p>
  <p>取消按钮：
      <input type="reset" value="取消" />
  </p>
</form>
<form name="f2" id="f2id"></form>
</body>
</html>
